import { useDrag } from "react-dnd"
import { findCardByIndexs } from "../../helper"
import { CardProps } from "../card"

export interface IItemProps {
    left: number 
    top:number 
    width: number 
    height:number 
    direction: string
}

const style = {
    width: 6,
    height: 6,
    border: '1px solid #722ed1',
    backgroundColor: '#722ed1',
    position: 'absolute',
    zIndex: 100,
}



const Item = ({ left, top, width, height, direction }: IItemProps) => {
    const [, drag] = useDrag({
        type: 'anchor',
        item: () => {
            return { type: 'anchor', left, top, width, height, direction }
        },
        collect: (monitor) => ({
            isDragging: monitor.isDragging(),
        }),
    })

    const getPos = {
        leftTop: () => ({ left: left - 3, top: top - 3 }),
        rightTop: () => ({ left: left + width - 3, top: top - 3 }),
        leftBottom: () => ({ left: left - 3, top: top + height - 3 }),
        rightBottom: () => ({ left: left + width - 3, top: top + height - 3 }),
        upCenter: () => ({ left: left + (width / 2) - 3, top: top - 3 }),
        downCenter: () => ({ left: left + (width / 2) - 3, top: top + height - 3 }),
        leftCenter: () => ({ left: left - 3, top: top + (height / 2) - 3 }),
        rightCenter: () => ({ left: left + width - 3, top: top + (height / 2) - 3 })
    } as Record<string, ()=> ({left: number, top: number})>

    const pos = getPos[direction]();
    const nResizestyle = ['upCenter', 'downCenter'].includes(direction) ? {cursor: 'n-resize'} : {}
    const eResizestyle = ['leftCenter', 'rightCenter'].includes(direction) ? {cursor: 'e-resize'} : {}
    const neResizestyle = ['rightTop', 'leftBottom'].includes(direction) ? {cursor: 'ne-resize'} : {}
    const nwResizestyle = ['leftTop', 'rightBottom'].includes(direction) ? {cursor: 'nw-resize'} : {}
    return <div ref={drag} style={{ ...style, ...nResizestyle,...eResizestyle,...neResizestyle,...nwResizestyle, left:pos.left, top:pos.top } as React.CSSProperties}></div>
}

export const Anchor = (props: { left: number, top: number, width: number, height: number, showDimension: boolean, selectIndex: number[], cards: CardProps[] }) => {
    const { width, height, showDimension, selectIndex, cards } = props;
    if (!width || !height || selectIndex.length <= 0) return null

    let anchors = [] as string[];
    console.log('selectIndex', selectIndex)
    const card = findCardByIndexs(cards, selectIndex);

    if (!card) {
        console.error('【选中元素失败】：selectIndex', selectIndex, ';cards', cards, card)
        return
    }

    // if (card.tab === 'basic') {
        anchors = card.type === 'fixed' ? [
            'leftTop',
            'rightTop',
            'leftBottom',
            'rightBottom',
            'upCenter',
            'downCenter',
            'leftCenter',
            'rightCenter'
        ] : [
            'rightBottom',
            'downCenter',
            'rightCenter'
        ]
    // }
    console.log('card', card)
    return <>
        {anchors.map(direction => <Item key={direction} direction={direction} {...props}></Item>)}
        <div className={`animate__animated ${showDimension ? 'animate__fadeIn' : 'animate__fadeOut'}`} style={{
            position: 'absolute', 
            top: (card.top || 0),
            left: (card.left || 0) + card.width,
            whiteSpace: 'nowrap',
            color: '#ccc',
            fontSize: 14,
            marginLeft: 6
        }}>{card.width} × {card.height}</div>
        
    </>
}